<template>
  <div id="map" style="width: 100%;height: 100%">
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: 'EarthquakeMap',
  data() {
    return {
      lat: '',
      lng: ''
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        "key": "18a9e2684228941aa30f1710b7ce30b2", //申请好的Web端开发者Key，首次调用load时必填
        "version": "2.0",  //指定要加载的JSAPI的版本，缺省时默认为1.4.15
        "plugins": ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
        "Loca":{  //是否加载 Loca,缺省不加载
          "version": '2.0.0'  //Loca 版本,缺省1.3.2
        }
      }).then((AMap)=> {
        var dis = new AMap.DistrictLayer.World({
          zIndex: 10,
          styles: {
            "stroke-width": 0.8,
            "fill": "rgba(0, 0, 0, .8)",
            "city-stroke": "rgba(100, 100, 100, 0.2)",
            "county-stroke": "rgba(50, 50, 50, 0.3)",
            "province-stroke": "rgba(255, 0, 0, 0.2)",
            "coastline-stroke": "rgba(0, 0, 255, 0.8)",
            "nation-stroke": "rgb(252,249,249)"
          }
        });
        var map = new AMap.Map('map', {
          zoom: 3.70,
          showLabel: false,
          viewMode: '3D',
          center: [98.159446, 40.547895],
          mapStyle: 'amap://styles/51ff0c8149c06c5d409eba284ad36734',
          layers: [dis],
        });

        var loca = new Loca.Container({
          map,
        });

        var geo = new Loca.GeoJSONSource({
          url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/earthquake.json',
        });

        var pl = window.pl = new Loca.PointLayer({
          zIndex: 10,
          blend: 'lighter' // lighter normal
        });

        var r = 20;
        var colors = [
          '#F86615',
          '#F86615',
          '#F86615',
          '#F86615',
          '#D60352',
        ];

        pl.setSource(geo);
        pl.setStyle({
          radius: function (i, feature) {
            let level = +feature.properties.level;
            if (level < 7) {
              return level / 2;
            }
            return 8;
          },
          color: function (i, feature) {
            let data = feature.properties;
            let ci = ~~(data.depth / 120 * colors.length) % colors.length;
            return colors[ci];
          },
          borderWidth: 0,
          blurRadius: -1,
          unit: 'px',
        });
        loca.add(pl);

        pl.addAnimate({
          key: 'radius',
          value: [0, 1],
          duration: 500,
          easing: 'Linear',
          transform: 2000,
          random: true,
          delay: 8000,
          yoyo: true,
          repeat: 100000
        });


      })
    }
  }
}
</script>

<style>
/* ... 保持原有的CSS样式 ... */
</style>


